<!DOCTYPE html>
<html lang="en" style="background-color: #ccc;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div>iframe 页面内容</div>
    <iframe src="./iframe-page.html" frameborder="0" id="iframe-page" class="iframe-page"></iframe>
    <hr>
    <div class="send-message">
        <div class="title">发送消息到子级页面</div>
        <textarea class="textarea" id="send-content"></textarea>
        <input type="button" class="btn-send" id="btn-send" value="发送消息">
    </div>
    <div class="received-message">
        <div class="title">接收子级页面消息</div>
        <textarea class="textarea" id="received-content"></textarea>
    </div>
    <script>
      var iframeDom = document.getElementById("iframe-page");
        var sendMessage=function(data) {
          iframeDom.contentWindow.receivedMessage(data);
        };

        var receivedMessage=function(data){
          document.getElementById("received-content").value=data;
        };
        window.sendMessage=sendMessage;
        window.receivedMessage=receivedMessage;

        var clickCallback= function(e){
            var content=document.getElementById("send-content").value;
            window.sendMessage(content);
        };
        var btn=document.getElementById("btn-send");
        btn.removeEventListener("click",clickCallback);
        btn.addEventListener("click",clickCallback)
    </script>
</body>
</html>